<template>
    <div style="text-align: left">
        <div id="example-1">
            <toggle-button label-enable-text="开" label-disable-text="关" default-state="true"/>
        </div>
        <hr/>
        <div id="example-2">
            <simple-toggle-button :checked-state="true"></simple-toggle-button>
        </div>
        <hr/>
        <div class="hello">
            <shopping-bag
                :product-in-card="this.cart"
                v-on:increment="this.cart += 1"
                v-on:decrement="this.cart -= 1">
            </shopping-bag>
            <button type="button" @click="handleIncrement">+1</button>
            &nbsp;&nbsp;
            <button type="button" @click="handleDecrement">-1</button>
            &nbsp;&nbsp;
            <button type="button" @click="triggerEmit('123')">触发Emit</button>
            <button type="button" @click="demoLog('456')">DemoLog</button>
            <hr/>
            <div>
                <h1>Parent</h1>
                <child v-model="content" @input="childChange"></child><br/>
                <p>
                    <b>Child与Parent绑定的内容:{{content}}</b>
                </p>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Emit,Vue } from 'vue-property-decorator'

import ToggleButton from '@/components/my-component/comp/ToggleButton.vue'
import SimpleToggleButton from '@/components/my-component/comp/SimpleToggleButton.vue'
import ShoppingBag from '@/components/my-component/comp/ShoppingBag.vue'
import Child from '@/components/my-component/comp/Child.vue'

@Component({
    components: { Child, ShoppingBag, SimpleToggleButton, ToggleButton }
})
export default class PropsComponent extends Vue {
    name = '';
    cart = 0;
    content = "初始化内容"

    public handleIncrement(){
        this.cart += 1;
    }

    public handleDecrement(){
        this.cart -= 1;
    }

    @Emit("triggerEmit")
    triggerEmit(str:any){
        console.log(str);
    }

    @Emit()
    demoLog(data:any){
        console.log(data);
    }
    childChange(val:any,event:any){
        console.log(val);
        console.log(event);
    }
}
</script>

<style scoped>

</style>
